import { SendOutlined, MicrophoneLine, Keyboard } from "@/components/Icons";
import styles from "./index.module.less";
import { Input } from "antd";
import {
  forwardRef,
  useContext,
  useEffect,
  useImperativeHandle,
} from "react";
import { ChatContext } from "@/pages/BigScreen/context/store";
import cName from "classnames";
import StopOutlined from "@/components/Icons/StopOutlined";
import CustomTag from "@/components/CustomTag";
import ZskLight from "@/components/Icons/ZskLight";
import ZskUnLight from "@/components/Icons/ZskUnLight";
import DeepthinkLight from "@/components/Icons/DeepthinkLight";
import Deepthink from "@/components/Icons/Deepthink";
import { useGlobalData } from "@/pages/BigScreen/context/chat";
import VoiceBlock from "@/components/VoiceBlock";

const { TextArea } = Input;

const ChatFooter = forwardRef((props: any, ref) => {
  // const [] = useState();
  const { think, hyzsTarget, setHyzsTarget, setThink } = useGlobalData();

  const {
    isLoading,
    isVoice,
    value,
    voiceStatus,
    cancelAsk,
    handle,
    setValue,
    changeInputMethod,
    voiceKeyUpHanlder,
    voiceKeyDownHanlder,
  } = useContext(ChatContext);

  const addChatOlTempStr = (str = "") => {
    let cV = `${value}${str}`;
    setValue(cV);
  };

  const replaceReg = (str) => {
    // // 设想是把当前 value 中 (x) 替换为 给定字符
    // let cV = value;
    // const regex = /\(x\)/g;
    // const result = cV.replace(regex, str);
    // 直接赋值, 通过 in 模板字符串注入
    setValue(str);
  };

  useImperativeHandle(ref, () => ({
    // 暴露给外部 offlineData  选择 插件的回调
    handleChatOlTemp: (str = "") => {
      // ! 注入 问题 模板
      addChatOlTempStr(str);
    },

    // 暴露给外部 offlineData 插件 选择 指标的回调
    handleChatOlIndex: (str = "") => {
      // ! 注入 问题 模板
      replaceReg(str);
    },
  }));

  useEffect(() => {
    document.body.addEventListener("keyup", voiceKeyUpHanlder);
    document.body.addEventListener("keydown", voiceKeyDownHanlder);
    return () => {
      document.body.removeEventListener("keyup", voiceKeyUpHanlder);
      document.body.removeEventListener("keydown", voiceKeyDownHanlder);
    };
  }, [voiceKeyUpHanlder, voiceKeyDownHanlder]);

  return (
    <div className={styles["chat-footer"]}>
      {/* 输入框 */}
      <div>
        {isVoice ? (
          <div style={{ height: 32 }}></div>
        ) : (
          <TextArea
            placeholder="请选择或输入问题进行提问"
            style={{ resize: "none" }}
            className={styles["chat-textarea"]}
            rows={1}
            value={value}
            bordered={false}
            onChange={(e) => {
              setValue(e.target.value);
            }}
            onPressEnter={() => {
              if (!value) return;
              handle();
            }}
          />
        )}
      </div>

      {/* 操作按钮 */}
      <div className={styles["btns"]}>
        {isVoice && (
          <div className={styles["voice"]}>
            <div className={styles["tip"]}>按住空格与我对话</div>
            <VoiceBlock voiceStatus={voiceStatus}></VoiceBlock>
          </div>
        )}

        <div className={styles["left"]}>
          <CustomTag
            name="深度分析"
            type={think ? "select" : "default"}
            icon={think ? <DeepthinkLight /> : <Deepthink />}
            onClick={() => {
              setThink(!think);
            }}
          />
          <CustomTag
            name="行业知识"
            type={hyzsTarget ? "select" : "default"}
            icon={hyzsTarget ? <ZskLight /> : <ZskUnLight />}
            onClick={() => {
              setHyzsTarget(!hyzsTarget);
            }}
          />
        </div>
        <div className={styles["right"]}>
          {/* ! 语音暂时注解 */}
          <div
            className={cName(styles["btn"])}
            onClick={() => {
              changeInputMethod();
            }}
            style={{ marginRight: "0.4rem" }}
          >
            {isVoice ? (
              <Keyboard></Keyboard>
            ) : (
              <MicrophoneLine></MicrophoneLine>
            )}
          </div>

          {!isVoice && (
            <>
              {isLoading ? (
                <div
                  className={cName(styles["stop-btn"])}
                  onClick={() => {
                    cancelAsk();
                  }}
                >
                  <StopOutlined></StopOutlined>
                </div>
              ) : (
                <div
                  className={cName(styles["send-btn"], {
                    [styles["disabled"]]: !value,
                  })}
                  onClick={() => {
                    if (!value) return;
                    handle();
                  }}
                >
                  <SendOutlined></SendOutlined>
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
});
export default ChatFooter;
